<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <title>Title</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-4.4.1-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap-grid.css">
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap-reboot.css">
    <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
    <style>
        .movieList {
            width: 600px;
            margin-top: 10px;
            margin-left: 50px;
            text-align: center;
        }
    </style>

</head>
<body>
<div>
    <div>
        <div>   <!-- 179000550黄超凡 -->
            <nav class="navbar navbar-expand-lg navbar-light" style="margin-left: 30px">
                <a class="navbar-brand" href="#">近期热门电影</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul id="nav" class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">热映</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">内地</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">欧美</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">日韩</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="">
            <div class="movieList">
                <ul id="item" class="row row-cols-3">
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
        });
        $.ajax({
            url:"https://douban.uieee.com/v2/movie/in_theaters?count=6",
            method:"get",
            dataType:"jsonp",
            success:function (r) {
                    console.log(r)
                    for (let i in r.subjects) {
                        console.log(r.subjects[i].images.small);
                        $("#item").append("<li>"+"<img src='"+r.subjects[i].images.small+"' style='width: 180px;height: 252px'/>"+"<p>"+r.subjects[i].title+"("+r.subjects[i].mainland_pubdate+")</p>"+"</li>");
                    }
                }
        })

    })
</script>

</body>
</html>